//用户状态
{
  window.onload = function () {
    let oLogin = document.querySelector('.login1')
    let flag = localStorage.getItem('token')
    let user = localStorage.getItem('user')
    if (flag) {
      oLogin.innerHTML = `<a class="red" href="javascript:;">Hi, ${user}</a><a class="exit" href="javascript:;">&nbsp;&nbsp; [退出]&nbsp;&nbsp;</a><em class="card"></em><a href="./html/shopping.html">购物车</a>&nbsp;<b class='red'></b>`

      let oExit = document.querySelector('.exit')

      oExit.addEventListener('click', function () {
        localStorage.removeItem('user')
        localStorage.removeItem('token')
        location.reload()
      })
      // 购物车数据
      let shopCarCount = document.querySelector('.welcome b')
      // 购物车里面
      if (localStorage.getItem('shopArr') === null) {
        var count = 0
      } else {
        count = JSON.parse(localStorage.getItem('shopArr')).length
      }
      shopCarCount.innerHTML = count
    }
  }
}
//导航二级
{
  let province = document.querySelector('.province')
  let goWhere = document.querySelector('.go-where')
  //初始化
  ajax({
    url: '../../Dangdangshopping/data/province.json',
    success(res) {
      let obj = JSON.parse(res).data
      goWhere.innerHTML = `送至： ${obj[0]}`
      //渲染省份
      obj.forEach(ele => {
        province.innerHTML += `<li><a href="javascript:;">${ele}</a></li>`
      })
      //更换省份
      province.addEventListener('click', e => {
        goWhere.innerHTML = `送至： ${e.target.innerText}`
      })
      goWhere.addEventListener('mouseover', () => {
        province.style.display = 'block'
      })
      goWhere.addEventListener('mouseout', () => {
        province.style.display = 'none'
      })
      province.addEventListener('mouseover', () => {
        province.style.display = 'block'
      })
      province.addEventListener('mouseout', () => {
        province.style.display = 'none'
      })
    },
  })
  //导航栏初始化
  let navRight = document.querySelector('.nav-right')
  ajax({
    url: '../../Dangdangshopping/data/nav.json',
    success(res) {
      let obj = JSON.parse(res).data
      obj.forEach((ele, index) => {
        navRight.innerHTML += `<li>
    <a href="javascript:;" class="${ele.erJi ? 'bg' : ''}"
    data-s=${ele.erJi ? index : null}>
    ${ele.msg}</a>
    <div class="nav-list-right"></div></li>`
      })
      let navErj = navRight.querySelectorAll('.nav-list-right')
      //生成二级
      navRight.addEventListener('mouseover', e => {
        if (e.target.tagName === 'A') {
          if (e.target.dataset.s !== 'null') {
            let erJ = e.target.parentNode.children[1]
            let erJN = obj[e.target.dataset.s].erJi.msg
            erJ.innerHTML = ''
            for (let i = 0; i < erJN.length; i++) {
              erJ.innerHTML += `<p>${erJN[i]}</p>`
            }
            erJ.style.display = 'block'
          }
        }
      })
      navRight.addEventListener('mouseout', e => {
        if (e.target.tagName === 'A') {
          e.target.nextElementSibling.style.display = 'none'
        }
      })
      navErj.forEach(ele => {
        ele.addEventListener('mouseover', e => {
          ele.style.display = 'block'
        })
        ele.addEventListener('mouseout', e => {
          ele.style.display = 'none'
        })
      })
    },
  })
}
//搜索框
{
  let searchSpan = document.querySelector('.search span')
  let selectPop = document.querySelector('.search .select_pop')
  //初始化
  ajax({
    url: '../../Dangdangshopping/data/search.json',
    success(res) {
      let obj = JSON.parse(res).data
      searchSpan.innerHTML = obj[0]
      obj.forEach(ele => {
        selectPop.innerHTML += `<a href="javascript:;">${ele}</a>`
      })
      searchSpan.addEventListener('mouseover', () => {
        selectPop.style.display = 'block'
      })
      searchSpan.addEventListener('mouseout', () => {
        selectPop.style.display = 'none'
      })
      selectPop.addEventListener('mouseover', () => {
        selectPop.style.display = 'block'
      })
      selectPop.addEventListener('click', e => {
        searchSpan.innerHTML = e.target.innerText
      })
      selectPop.addEventListener('mouseout', () => {
        selectPop.style.display = 'none'
      })
    },
  })

  //热搜数据
  let hotSearch = [
    '开口说话绘本',
    '百丽童鞋',
    '三只松鼠',
    '世界喧嚣',
    '透视世界',
    '今日抢购',
  ]
  //初始化
  let hotSech = document.querySelector('.search_bottom')
  hotSech.innerHTML = `<a href="javascript:;">热搜:</a>`
  hotSearch.forEach(ele => {
    hotSech.innerHTML += `<a href="javascript:;">${ele}</a>`
  })
  hotSech.innerHTML += `<a href="javascript:;">高级搜索</a>`
}
//购物车
{
  // 购物车数据
  let shopCarCount = document.querySelector('.char b')
  // 购物车里面
  let count = 0
  if (localStorage.getItem('user')) {
    if (localStorage.getItem('shopArr') !== null) {
      count = JSON.parse(localStorage.getItem('shopArr')).length
    }
  }
  shopCarCount.innerHTML = count
}
//模糊查询
{
  let search = document.querySelector('#logo input')
  let btn = document.querySelector('#logo button')
  let mainItemLeft = document.querySelector('.main_item_left')
  let xhr = new XMLHttpRequest()
  function getData(n, txt) {
    mainItemLeft.innerHTML = ''
    xhr.open('get', `../server/getList.php?num=${n}&limit=32&txt=${txt}`, true)

    xhr.send()

    xhr.onload = function () {
      let str = xhr.responseText
      // 把字符串变成可用对象
      let arr = JSON.parse(str)

      arr.forEach(ele => {
        mainItemLeft.innerHTML += `<div class="item">
                <img src="${ele.list_big_pic}" alt="" listId="${ele.list_id}"/>
                <div class="pic_list_show">
                  <img src="${ele.list_small_pic}" alt=""/>
                </div>
                  <p class="price">¥${ele.list_price}</p>
                <p class="name">${ele.list_name}</p>
                <p class="search">${ele.list_introduce}</p>
                <img src="../images/listImages/3.jpg" alt="" />
                <span>${1}条评论</span>
                <p class="link">${ele.list_shop}</p>
                <a href="javascript:;"><b class="shopCar" goodsId="${
                  ele.list_id
                }"><i></i>加入购物车</b></a>
                <b class="soucang">收藏</b>
            </div>`
      })
    }
  }

  search.addEventListener('keydown', e => {
    if (e.keyCode === 13) {
      getData(1, search.value)
      location.href = '../../Dangdangshopping/html/list.html'
    }
  })
  btn.addEventListener('click', () => {
    getData(1, search.value)
    location.href = '../../Dangdangshopping/html/list.html'
  })
}
//全部商品分类
{
  //商品分类数据
  let classifyData = [
    '图书',
    '电子书',
    '运动户外',
    '乐高玩具',
    '美妆',
    '家用电器',
  ]
  let navList = document.querySelector('.nav_list')
  classifyData.forEach(ele => {
    navList.innerHTML += `<li><a href="javascript:;">${ele}</a></li>`
  })
}
//商品分类详情
{
  //一级菜单
  let News = document.querySelector('.news_left>ul')

  ajax({
    url: '../../Dangdangshopping/data/indexNews.json',
    success(res) {
      let obj = JSON.parse(res)
      //渲染列表
      obj.data.forEach(ele => {
        News.innerHTML += `<li class="first_news">
        <a href="javascript:;">${ele.msg}</a>
        <div class="xfx">
          <div class="xfx_n">
            <p></p>
            <ul class="fist_xfx"></ul>
          </div>
        </div></li>`
      })
      //调整每个二级位置
      let oList = News.querySelectorAll('.xfx')
      oList.forEach((ele, index) => {
        ele.style.top = index * -30 + -4 + 'px'
      })

      //第一行
      let xfxN = document.querySelectorAll('.xfx_n p')
      xfxN.forEach((ele, index) => {
        obj.data[index].erJi.tit.forEach(el => {
          ele.innerHTML += `<a href="javascript:;">${el}</a>`
        })
      })
      //内容
      let fisXfx = News.querySelectorAll('.fist_xfx')
      obj.data.forEach((ele, index) => {
        ele.erJi.list.forEach((el, idx) => {
          fisXfx[index].innerHTML += `<li>
            <a href="javascript:;">${el.title}</a>
            <a href="javascript:;">${el.msg[0]}</a>
            <a href="javascript:;">${el.msg[1]}</a>
            <a href="javascript:;">${el.msg[2]}</a>
            <a href="javascript:;">${el.msg[3]}</a>
            <a href="javascript:;">${el.msg[4]}</a>
            <a href="javascript:;">${el.msg[5]}</a>
            <a href="javascript:;">${el.msg[6]}</a>
            <a href="javascript:;">${el.msg[7]}</a>
            <a href="javascript:;">${el.msg[8]}</a>
            <a href="javascript:;">${el.msg[9]}</a>
            <a href="javascript:;">${el.msg[10]}</a>
            <a href="javascript:;">${el.msg[11]}</a>
          </li>`
        })
      })
    },
  })
}
//轮播图
{
  let banner = document.querySelector('.banner')
  //请求数据
  ajax({
    url: '../../Dangdangshopping/data/indexBanner.json',
    success(res) {
      let obj = JSON.parse(res)
      obj.data.forEach(ele => {
        banner.innerHTML += `<div class="swiper-slide">
          <img src="${ele.imgUrl}" alt="" />
        </div>`
      })
      new Swiper('.news_center', {
        loop: true,
        autoplay: {
          delay: 1500,
        },
        effect: 'fade',
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>'
          },
        },
        navigation: {
          nextEl: '.news_center .next',
          prevEl: '.news_center .prev',
        },
      })
    },
  })
}
//底下的轮播图
{
  let newsBot = document.querySelector('.news_bot')
  ajax({
    url: '../../Dangdangshopping/data/indexNewsBottom.json',
    success(res) {
      let obj = JSON.parse(res)
      //渲染数据
      obj.data.forEach((ele, index) => {
        if (index < 4) {
          newsBot.children[0].innerHTML += `<img src="${ele.imgUrl}" alt="" />`
        } else {
          newsBot.children[1].innerHTML += `<img src="${ele.imgUrl}" alt="" />`
        }
      })
      //swiper 方法
      new Swiper('.news_bottom', {
        loop: true,
        autoplay: {
          delay: 1500,
        },
        effect: 'fade',
        navigation: {
          nextEl: '.news_bottom .next1',
          prevEl: '.news_bottom .prev1',
        },
      })
    },
  })
}
//右边的轮播图
{
  //信息数据
  let messageData = [
    {
      mes: '信息公告',
      dat: [
        '寒假季 百万图书每满100减50',
        '爆款童书7.9折封顶每满100减50',
        '年货节童装童鞋分会场1.5折起',
      ],
    },
    {
      ser: '服务公告',
      dat: [
        '关于谨防诈骗的重要提示',
        '当当阅读器海量电子书随时读',
        '话费卡兑换当当礼品卡',
        '多种商品，礼品卡支付更优惠!',
        '【虚假发货】 -处罚公告',
      ],
    },
  ]
  let newsLastData = [
    { imgUrl: './images/indexImages/1001.jpg' },
    { imgUrl: './images/indexImages/1002.png' },
    { imgUrl: './images/indexImages/1003.jpg' },
  ]
  let newsRight = document.querySelector('.news_right')
  newsRight.children[1].firstElementChild.innerHTML = messageData[0].mes
  newsRight.children[1].lastElementChild.innerHTML = messageData[1].ser
  messageData[0].dat.forEach(ele => {
    newsRight.children[2].children[0].innerHTML += `<p>${ele}</p>`
  })
  messageData[1].dat.forEach(ele => {
    newsRight.children[2].children[1].innerHTML += `<p>${ele}</p>`
  })
  let nSpan = document.querySelectorAll('.news_right_first_div span')
  let aAside = document.querySelectorAll('.news_right aside  section')
  nSpan.forEach((ele, index) => {
    ele.onmouseover = function () {
      for (let i = 0; i < nSpan.length; i++) {
        nSpan[i].classList.add('on')
        aAside[i].style.display = 'none'
      }
      this.classList.remove('on')
      aAside[index].style.display = 'block'
    }
  })

  let newsLast = document.querySelector('.news_last .swiper-wrapper')
  newsLastData.forEach(ele => {
    newsLast.innerHTML += `<div class="swiper-slide"><img src="${ele.imgUrl}" alt="" /></div>`
  })

  new Swiper('.news_last', {
    loop: true,
    autoplay: {
      delay: 1500,
    },
    effect: 'fade',
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  })
}
//第二块左边
{
  let timeData = ['00:00', '08:00', '12:00', '16:00', '20:00']
  let homeTime = document.querySelector('.home-time')
  let hour = document.querySelector('.hour')
  let minute = document.querySelector('.minute')
  let second = document.querySelector('.second')
  timeData.forEach(ele => {
    homeTime.innerHTML += `<li>${ele}场</li>`
  })
  function countDown() {
    let date = new Date()
    let nowHours = date.getHours() - 0

    homeTime.children.className = ''
    if (nowHours >= 0 && nowHours < 8) {
      homeTime.children[0].className = 'red'
      var target = new Date(9999, 11, 31, 8, 0, 0)
    } else if (nowHours >= 8 && nowHours < 12) {
      homeTime.children[1].className = 'red'
      var target = new Date(9999, 11, 31, 12, 0, 0)
    } else if (nowHours >= 12 && nowHours < 16) {
      homeTime.children[2].className = 'red'
      var target = new Date(9999, 11, 31, 16, 0, 0)
    } else if (nowHours >= 16 && nowHours < 20) {
      homeTime.children[3].className = 'red'
      var target = new Date(9999, 11, 31, 20, 0, 0)
    } else if (nowHours >= 20 && nowHours < 0) {
      homeTime.children[4].className = 'red'
      var target = new Date(9999, 11, 31, 0, 0, 0)
    }

    //时间差
    let reduce = parseInt((target - date) / 1000)
    //小时
    let hours = Math.floor((reduce % 86400) / 3600)
    //分钟
    let minutes = Math.floor((reduce % 3600) / 60)
    //秒
    let seconds = Math.floor(reduce % 60)

    hour.innerHTML = `${hours < 10 ? '0' + hours : hours}`
    minute.innerHTML = `${minutes < 10 ? '0' + minutes : minutes}`
    second.innerHTML = `${seconds < 10 ? '0' + seconds : seconds}`
  }
  countDown()
  setInterval(countDown, 1000)
}
//第二块右边
{
  let homeRightData = [
    { imgUrl: './images/indexImages/2021120117320581256.jpg' },
    { imgUrl: './images/indexImages/2221113013474516840.jpg' },
    { imgUrl: './images/indexImages/2022011418415019369.jpg' },
    { imgUrl: './images/indexImages/2421113013462194934.jpg' },
    { imgUrl: './images/indexImages/2621113016295678463.jpg' },
    { imgUrl: './images/indexImages/2022011418414021945.jpg' },
    { imgUrl: './images/indexImages/2021072910571933128.jpg' },
    { imgUrl: './images/indexImages/2022011317432767036.jpg' },
  ]
  let rightBody = document.querySelector('.right_body .swiper-wrapper')
  homeRightData.forEach((ele, index) => {
    if (index < 4) {
      rightBody.children[0].innerHTML += `<img src="${ele.imgUrl}" alt="" />`
    } else if (index > 3 && index < 8) {
      rightBody.children[1].innerHTML += `<img src="${ele.imgUrl}" alt="" />`
    }
  })
  new Swiper('.right_body', {
    loop: true,
    autoplay: {
      delay: 1500,
    },
    effect: 'fade',
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  })
}
//第二块手风琴
{
  let newsLeftHeadSpan = document.querySelectorAll('.news_left_head span')
  let aUl = document.querySelectorAll('.book_top ul')
  newsLeftHeadSpan.forEach((el, index) => {
    el.onmouseover = function () {
      for (let i = 0; i < newsLeftHeadSpan.length; i++) {
        newsLeftHeadSpan[i].classList.remove('sp_on')
        aUl[i].classList.add('ul_on')
      }
      this.classList.add('sp_on')
      aUl[index].classList.remove('ul_on')
    }
  })

  let aLi1 = document.querySelectorAll('.book_top ul:first-of-type li')
  let aLi2 = document.querySelectorAll('.book_top ul:last-of-type li')
  aLi1.forEach(ele => {
    ele.onmouseover = function () {
      for (let i = 0; i < aLi1.length; i++) {
        aLi1[i].classList.remove('on')
      }
      this.classList.add('on')
    }
  })
  aLi2.forEach(ele => {
    ele.onmouseover = function () {
      for (let i = 0; i < aLi2.length; i++) {
        aLi2[i].classList.remove('on')
      }
      this.classList.add('on')
    }
  })
}
//第三块切换
{
  let booksData = [
    {
      title: '最新上架',
      imgUrl: [
        'http://img63.ddimg.cn/upload_img/00877/202201/238x441-1642054773.jpg',
        'http://img63.ddimg.cn/upload_img/00865/202201/banner-1640771223.jpg',
        'http://img3m2.ddimg.cn/83/3/29327942-1_l_9.jpg',
        'http://img3m2.ddimg.cn/97/18/29339242-1_l_12.jpg',
        'http://img3m4.ddimg.cn/2/20/29316674-1_l_6.jpg',
        'http://img3m8.ddimg.cn/72/36/29278728-1_l_17.jpg',
        'http://img3m7.ddimg.cn/85/29/29316757-1_l_8.jpg',
        'http://img3m0.ddimg.cn/51/2/29267520-1_l_29.jpg',
      ],
    },
    {
      title: '独家畅品',
      imgUrl: [
        './images/indexImages/lcdt-1638180042.jpg',
        './images/indexImages/banner-1637738263.jpg',
        './images/indexImages/29327942-1_l_8.jpg',
        './images/indexImages/29311502-1_l_4.jpg',
        './images/indexImages/19316674-1_l_6.jpg',
        './images/indexImages/39278728-1_l_17.jpg',
        './images/indexImages/49301878-1_l_3.jpg',
        './images/indexImages/59267520-1_l_29.jpg',
      ],
    },
    {
      title: '重点推荐',
      imgUrl: [
        'http://img57.ddimg.cn/9001320242492147.jpg',
        'http://img62.ddimg.cn/upload_img/00877/202201/335x220-1641954773.jpg',
        'http://img3m5.ddimg.cn/13/6/29327575-1_l_8.jpg',
        'http://img3m0.ddimg.cn/1/0/29347660-1_l_4.jpg',
        'http://img3m0.ddimg.cn/44/3/29222270-1_l_29.jpg',
        'http://img3m7.ddimg.cn/14/14/27915737-1_l_9.jpg',
        'http://img3m6.ddimg.cn/79/23/27943126-1_l_12.jpg',
        'http://img3m0.ddimg.cn/7/2/28482010-1_l_9.jpg',
      ],
    },
    {
      title: '电子书',
      imgUrl: [
        'http://img63.ddimg.cn/cuxiao/left_logo-20220114.jpg',
        'http://img63.ddimg.cn/ebook/201709/dslc-lz-3.jpg',
        'http://img3m0.ddimg.cn/56/4/1901286740-1_l_2.jpg',
        'http://img3m2.ddimg.cn/65/12/1901286452-1_l_1.jpg',
        'http://img3m9.ddimg.cn/63/26/1901287539-1_l_1.jpg',
        'http://img3m4.ddimg.cn/67/14/1901286454-1_l_2.jpg',
        'http://img3m9.ddimg.cn/31/18/1901287309-1_l_1.jpg',
        'http://img3m3.ddimg.cn/12/16/1901285013-1_l_1.jpg',
      ],
    },
  ]
  let books = document.querySelector('.books')
  booksData.forEach(ele => {
    books.innerHTML += `<li>${ele.title}</li>`
  })
  let newsLeftImg = document.querySelectorAll('.news_left-img')
  let rollAa = document.querySelectorAll('.roll_aa')
  let listAaa = document.querySelectorAll('.list_aaa')
  let listBbb = document.querySelectorAll('.list_bbb')
  let newsMain = document.querySelectorAll('.news_main')
  //渲染数据
  booksData.forEach((ele, index) => {
    newsLeftImg[index].innerHTML = `<img src="${ele.imgUrl[0]}"></img>`
    rollAa[index].innerHTML = `<img src="${ele.imgUrl[1]}">`
    listAaa[
      index
    ].children[0].children[0].innerHTML = `<img src="${ele.imgUrl[2]}">`
    rollAa[index].innerHTML = `<img src="${ele.imgUrl[1]}">`
    listAaa[
      index
    ].children[1].children[0].innerHTML = `<img src="${ele.imgUrl[3]}">`
    listBbb[
      index
    ].children[0].children[0].innerHTML = `<img src="${ele.imgUrl[4]}">`

    listBbb[
      index
    ].children[1].children[0].innerHTML = `<img src="${ele.imgUrl[5]}">`

    listBbb[
      index
    ].children[2].children[0].innerHTML = `<img src="${ele.imgUrl[6]}">`

    listBbb[
      index
    ].children[3].children[0].innerHTML = `<img src="${ele.imgUrl[7]}">`
  })
  books.children[0].classList.add('on')
  books.addEventListener('mouseover', function (e) {
    booksData.forEach((ele, index) => {
      newsMain[index].style.zIndex = 1
      if (e.target.innerText === booksData[index].title) {
        newsMain[index].style.zIndex = 2
        for (let i = 0; i < e.target.parentNode.children.length; i++) {
          e.target.parentNode.children[i].className = ''
        }
        e.target.classList.add('on')
      }
    })
  })
}
//第四块切换
{
  let fourData = [
    {
      title: '服饰鞋包',
      imgUrl: [
        './images/indexImages/001.jpg',
        './images/indexImages/002.jpg',
        './images/indexImages/003.jpg',
        './images/indexImages/004.jpg',
        './images/indexImages/005.jpg',
        './images/indexImages/006.jpg',
        './images/indexImages/007.jpg',
        './images/indexImages/008.jpg',
        './images/indexImages/009.jpg',
      ],
    },
    {
      title: '运动潮流',
      imgUrl: [
        'http://img55.ddimg.cn/129090178879225_y.jpg',
        'http://img50.ddimg.cn/129090190607520_y.jpg',
        'http://img63.ddimg.cn/upload_img/00802/1/C3-22079-1620716364.jpg',
        'http://img63.ddimg.cn/ddimg/1991/dafuni-1634872325.jpg',
        'http://img55.ddimg.cn/80640156535855_y.jpg',
        'http://img58.ddimg.cn/185840171247438_y.jpg',
        'http://img53.ddimg.cn/80640151623403_y.jpg',
        'http://img51.ddimg.cn/199750197561991_y.jpg',
        'http://img50.ddimg.cn/227390183131940_y.jpg',
      ],
    },
    {
      title: '女装男装内衣',
      imgUrl: [
        'http://img57.ddimg.cn/136700160220637_y.jpg',
        'http://img56.ddimg.cn/71920226732336_y.jpg',
        'http://img51.ddimg.cn/77100159433901_y.jpg',
        'http://img56.ddimg.cn/136700160220636_y.jpg',
        'http://img55.ddimg.cn/116550058803125_y.jpg',
        'http://img54.ddimg.cn/53840156966114_y.jpg',
        'http://img54.ddimg.cn/186920220775964_y.jpg',
        'http://img57.ddimg.cn/241670166537777_y.jpg',
        'http://img63.ddimg.cn/ddimg/2047/123-1636025588.jpg',
      ],
    },
    {
      title: '童装童鞋',
      imgUrl: [
        'http://img60.ddimg.cn/ddimg/1646/annil-1632741664.jpg',
        'http://img60.ddimg.cn/ddimg/1646/I031-1632825585.jpg',
        'http://img63.ddimg.cn/ddimg/1646/I032-1632825607.jpg',
        'http://img62.ddimg.cn/ddimg/1646/I033-1632825648.jpg',
        'http://img63.ddimg.cn/ddimg/1646/15944-1639566348.jpg',
        'http://img62.ddimg.cn/upload_img/00761/sucai/qianbi-1571025326.jpg',
        'http://img63.ddimg.cn/ddimg/1646/I042-1632827071.jpg',
        'http://img61.ddimg.cn/ddimg/1646/I043-1632827094.jpg',
        'http://img63.ddimg.cn/ddimg/1646/I048155-1641797467.jpg',
      ],
    },
    {
      title: '鞋靴箱包',
      imgUrl: [
        'http://img60.ddimg.cn/ddimg/1646/annil-1632741664.jpg',
        'http://img63.ddimg.cn/ddimg/1991/dafuni-1634872325.jpg',
        'http://img62.ddimg.cn/ddimg/1991/8258-1634869936.jpg',
        'http://img50.ddimg.cn/215060264860510_y.jpg',
        'http://img57.ddimg.cn/182870160217717_y.jpg',
        'http://img52.ddimg.cn/206770133407702_y.jpg',
        'http://img62.ddimg.cn/ddimg/2336/123-1600335917.jpg',
        'http://img63.ddimg.cn/upload_img/00601/111/balabla-bao-1620811922.jpg',
        'http://img62.ddimg.cn/upload_img/00601/111/361-bao-1620811922.jpg',
      ],
    },
  ]
  let fourUl = document.querySelector('#four_tap ul')
  fourData.forEach(ele => {
    fourUl.innerHTML += `<li>${ele.title}</li>`
  })
  fourUl.children[0].classList.add('on')
  let fourPic2 = document.querySelectorAll('.four_pic2')
  fourData.forEach((ele, index) => {
    ele.imgUrl.forEach(el => {
      fourPic2[index].innerHTML += `<li><img src="${el}" alt="" /></li>`
      fourPic2[index].childNodes[0].innerHTML += ''
    })
  })
  let fourLunData = [
    [
      'http://img53.ddimg.cn/215060264858173_y.jpg',
      'http://img58.ddimg.cn/206770133580878_y.jpg',
    ],
    [
      'http://img62.ddimg.cn/upload_img/00802/1/B1-8064-1620716364.jpg',
      'http://img55.ddimg.cn/129090178879225_y.jpg',
    ],
    [
      'http://img57.ddimg.cn/71920226732337_y.jpg',
      'http://img52.ddimg.cn/77100159433902_y.jpg',
    ],
    [
      'http://img57.ddimg.cn/136700160220637_y.jpg',
      'http://img55.ddimg.cn/218500160882675_y.jpg',
    ],
    [
      'http://img62.ddimg.cn/ddimg/1646/I02860301-1644808780.jpg',
      'http://img63.ddimg.cn/upload_img/00761/sucai/baili-1-1571025449.jpg',
    ],
  ]

  fourPic2.forEach((elem, index) => {
    elem.childNodes[0].classList.add('swiper')
    elem.childNodes[0].classList.add('inbl')
    elem.childNodes[0].innerHTML = `
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="${fourLunData[index][0]}" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="${fourLunData[index][1]}" alt="" />
      </div>
      <div class="swiper-pagination inikclick"></div>
    </div>`
  })

  new Swiper('.inbl', {
    loop: true,
    autoplay: {
      delay: 1500,
    },
    effect: 'fade',
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  })

  fourUl.addEventListener('mouseover', e => {
    fourData.forEach((ele, index) => {
      fourPic2[index].style.zIndex = 1
      if (e.target.innerText === fourData[index].title) {
        fourPic2[index].style.zIndex = 2
        for (let i = 0; i < e.target.parentNode.children.length; i++) {
          e.target.parentNode.children[i].className = ''
        }
        e.target.classList.add('on')
      }
    })
  })
}
//第四块轮播
{
  let loginSomeData = [
    'http://img61.ddimg.cn/upload_img/00601/111/21540logopc-1547089033.jpg',
    'http://img62.ddimg.cn/upload_img/00601/111/10748-1621840898.jpg',
    'http://img62.ddimg.cn/upload_img/00629/wenjing/11-1618541078.jpg',
    'http://img61.ddimg.cn/upload_img/00727/123/senma-1533028171.jpg',
    'http://img60.ddimg.cn/ddimg/1646/logo4236-1641797970.jpg',
    'http://img63.ddimg.cn/ddimg/1646/logo22387-1641798075.jpg',
    'http://img63.ddimg.cn/ddimg/1646/logo8603-1641797937.jpg',
    'http://img62.ddimg.cn/ddimg/1646/logo21670-1641798182.jpg',
    'http://img54.ddimg.cn/116550052517224_y.jpg',
    'http://img57.ddimg.cn/116550040252217_y.jpg',
    'http://img56.ddimg.cn/53840045093756_y.jpg',
    'http://img63.ddimg.cn/ddimg/2278/98-1628577596.jpg',
    'http://img50.ddimg.cn/116550032618050_y.jpg',
    'http://img59.ddimg.cn/129090183801139_y.jpg',
    'http://img54.ddimg.cn/198970149805494_y.jpg',
    'http://img62.ddimg.cn/upload_img/00389/24342342/19975-1533027736.png',
    'http://img61.ddimg.cn/upload_img/00727/123/meibang-1533028211.jpg',
    'http://img61.ddimg.cn/ddimg/2047/110-1639533345.jpg',
    'http://img53.ddimg.cn/206770051287223_y.jpg',
    'http://img61.ddimg.cn/upload_img/00727/123/senma-1533028171.jpg',
  ]
  let loginSome = document.querySelector('.login-some .swiper-wrapper')
  loginSomeData.forEach((ele, index) => {
    if (index < 10) {
      loginSome.children[0].innerHTML += `<img src="${ele}" />`
    } else {
      loginSome.children[1].innerHTML += `<img src="${ele}" />`
    }
  })
  new Swiper('.login-some', {
    loop: true,
    autoplay: {
      delay: 500,
    },

    effect: 'fade',
  })
}
//楼层导航
{
  // 楼层
  let aFloor = document.querySelectorAll('.floor')
  let aUl = document.querySelector('.fix_screen_list')
  let aLi = document.querySelectorAll('.fix_screen_list li')
  let aA = document.querySelectorAll('.fix_screen_list li a')
  // 吸顶
  let home = document.querySelector('.home')
  let topSearch = document.querySelector('.big_search_top')
  window.onscroll = () => {
    //吸顶搜索
    if (home.getBoundingClientRect().top < 0) {
      topSearch.style.display = 'block'
    } else {
      topSearch.style.display = 'none'
    }

    let s = document.documentElement.scrollTop
    if (aFloor[0].offsetTop < s && aFloor[1].offsetTop > s) {
      aA[0].classList.add('f11')
      aA[1].classList.remove('f22')
      aA[2].classList.remove('f33')
      aA[3].classList.remove('f55')
    } else if (aFloor[1].offsetTop < s && aFloor[2].offsetTop > s) {
      aA[1].classList.add('f22')
      aA[0].classList.remove('f11')
      aA[2].classList.remove('f33')
      aA[3].classList.remove('f55')
    } else if (aFloor[2].offsetTop < s && aFloor[3].offsetTop > s) {
      aA[2].classList.add('f33')
      aA[0].classList.remove('f11')
      aA[1].classList.remove('f22')
      aA[3].classList.remove('f55')
    } else if (aFloor[3].offsetTop < s) {
      aA[3].classList.add('f55')
      aA[0].classList.remove('f11')
      aA[1].classList.remove('f22')
      aA[2].classList.remove('f33')
    }
  }
  aUl.addEventListener('mouseover', e => {
    if (e.target == aA[0]) {
      e.target.parentNode.classList.add('on')
      aA[0].classList.add('f11')
      aA[1].classList.remove('f22')
      aA[2].classList.remove('f33')
      aA[3].classList.remove('f55')
    }
    if (e.target == aA[1]) {
      e.target.parentNode.classList.add('on')
      aA[1].classList.add('f22')
      aA[0].classList.remove('f11')
      aA[2].classList.remove('f33')
      aA[3].classList.remove('f55')
    }
    if (e.target == aA[2]) {
      e.target.parentNode.classList.add('on')
      aA[2].classList.add('f33')
      aA[1].classList.remove('f22')
      aA[0].classList.remove('f11')
      aA[3].classList.remove('f55')
    }
    if (e.target == aA[3]) {
      e.target.parentNode.classList.add('on')
      aA[3].classList.add('f55')
      aA[1].classList.remove('f22')
      aA[2].classList.remove('f33')
      aA[0].classList.remove('f11')
    }
  })
  aUl.addEventListener('mouseout', e => {
    e.target.parentNode.classList.remove('on')
  })
  aLi.forEach((ele, index) => {
    ele.addEventListener('click', function () {
      document.documentElement.scrollTop = aFloor[index].offsetTop
    })
  })
}
//底部广告
{
  let closeIcon = document.querySelector('.close_icon')
  let bottomFixed = document.querySelector('.bottom_fixed')
  closeIcon.addEventListener('click', () => {
    bottomFixed.style.display = 'none'
  })
}
